body {
   font-family: 'Roboto', sans-serif;
   font-family: 'Rubik', sans-serif;
   position: relative;
   overflow-x: hidden; 
   overflow-y: auto;
   background: hsl(0, 0%, 15%);
   margin: 0;
}
/*
body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;   
   background: linear-gradient(to top, rgba(34, 34, 34, 0.5), rgba(56, 163, 165, 0.0), rgba(41, 61, 70, 0.5), rgba(37, 79, 97, 0.45), rgba(23, 62, 78, 0.7)), url("https://images.unsplash.com/photo-1414073875831-b47709631146?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80");
   filter: blur(0px);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center bottom;
   z-index: -1;
}
*/

/*Calendar*/
:root {
   --colScale: 2;
   --monthRowWidth: 100%;
   --lineWidth: 290%;
   --animationSpeed: 0.6s;

   --test: linear-gradient(to top, transparent 5%, rgb(58, 58, 58) 5% 95%, transparent 95%);

   --holidayColor: rgba(103, 255, 247, 0.7);
   --red: hsl(0, 81%, 60%);
   --containers: hsl(0, 0%, 2%); /*hsla(240, 14%, 8%, 0.7)*/
   --contrast: rgb(236, 70, 70); 
   --accent: rgb(90, 90, 90); /*#2949ff*/
   --borders: #ffffff70;
   --textContent: hsl(0, 0%, 75%); 
   --lines: rgba(204, 204, 204, 0.5);
   --events: rgba(16, 16, 22, 0.8); 
   --color-container: transparent;
   --main-clock-color: #2949ff; /*#62d451*/
   --hidden-sidebar: rgb(34, 34, 34);
   --extracted-color: black;
   --extracted-color-light: white;
   --glow: rgba(0, 0, 0, 0);

   --primary-light: rgb(255, 210, 48); /*#c8ffeb*/
   --primary: #ff9100; /*#74d365*/
   --primary-dark: rgb(211, 62, 17); /*#265820*/
   --white: rgba(255, 255, 255, 1);
   --greyLight-1: rgba(14, 14, 14, 0.8);
   --greyLight-2: rgba(14, 14, 14, 0.85);
   --greyLight-3: rgb(5, 5, 5);
   --greyLight-4: rgb(40, 40, 40);
   --greyDark: rgb(0, 0, 0);
} 

.second-layer {
   position: relative;
   margin-left: 30%;
}

/*START*/
.test {
   position: relative;
   left: 100%;
   transform: translateX(-100%);
   width: fit-content;
   height: fit-content;
   overflow: hidden;
   padding-left: 1em;
   padding-right: 1em;
}
/*STOP*/

/*Calendar again*/

.calendar-wrapper {
   position: relative;
   height: fit-content;
   margin: auto;
   width: 55%;
   max-width: 700px;
   border-radius: 20px;
}

.placement {
   position: relative;
   width: 80%;
   display: flex;
   flex-direction: row;
}

.calendar-header-container {
   position: absolute; 
   top: 0;
   left: 0;
   height: fit-content;
   width: 100%;
   z-index: 1;
   background-color: hsla(0, 0%, 7%, 0.8); 
   backdrop-filter: blur(10px); 
   color: var(--contrast);
   border-radius: 20px 20px 0 0;
   box-shadow: 0px 5px 15px 0px hsla(0, 0%, 100%, 0.11) inset, 0 5px 10px hsla(0, 0%, 3%, 0.5);
}

.calendar-header {
   position: relative;
   width: 100%;
   height: 100%;
   padding-top: 3%;
   padding-bottom: 3%;
}

#toggle-icons {
   position: relative;
   width: 22px;
   height: auto;
   border-radius: 22px;
   overflow: hidden;
}

#todayDayName {
   position: relative;
   color: var(--textContent);
   margin: 0;
   text-align: center;
}

/*Season & zodiac*/
/*
#season {
   position: relative;
   background-color: var(--extracted-color);
}

#outImage-container {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

#outImage-container img {
   height: 100%;
   width: 100%;
   cursor: pointer;
}

#canvas {
   display: none;
}
*/
/*Calendar again*/

.header-title {
   position: relative;

}

.calendar-content {
   position: relative;
   width: 100%;
   aspect-ratio: 1/1.45;
   background: linear-gradient(to top, var(--containers) 50%, hsl(0, 0%, 8%) 100%);
   color: var(--textContent);
   border-radius: 20px;
   overflow: hidden;
   font-size: 1vw;
}

.calendar-content::after {
   content: '';
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 4%;
   background: linear-gradient(to top, var(--containers) 20%, rgba(0, 0, 0, 0) 100%);
}

/*START*/
/*
#tableBody {
   position: relative;
   left: 50%;
   top: 50%;
   transform: translateX(-50%);
   height: 100%; 
   width: 100%;
   overflow: hidden;
}

.month-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   transition: all var(--animationSpeed) ease-in-out;
}

.month-container {
   position: relative;
   height: 100%; 
   width: 100%;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-0%);
   display: grid;
   grid-template-columns: repeat(3, 1fr); 
   grid-template-rows: repeat(4, 1fr); 
}*/

/*
.month-container {
   grid-template-columns: repeat(3, 1fr);
}*/

.grid-wrapper {
   position: relative;
   height: fit-content;
   width: 100%;
   transform: translateY(0);
   transition: none;
   display: flex;
   flex-direction: column;
}

.grid-container {
   position: relative;
   width: 100%;
   height: fit-content;
   top: 0;
   transition: all var(--animationSpeed) ease-in-out;
}

.grid-container-inner {
   position: relative;
   top: 0;
   transform-origin: 50% 0;
   height: fit-content; 
   width: 100%;
   transition: scale var(--animationSpeed) ease-in-out;
}

.month-row {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: var(--monthRowWidth);
   left: 50%;
   transform: translateX(-50%);
}

.grid-item {
   position: relative;
   width: 100%;
   height: 100%;
}

.month {
   position: relative;
   width: 90%;
   padding: calc(12px + 4%) 5% 3% 5%;
}

@keyframes fadeInMonth {
   from { opacity: 0; }
   to { opacity: 1; }
}

.day-row {
   position: relative;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: 100%;
}

.year-name-container {
   position: absolute;
   height: fit-content;
   top: 0;
   width: var(--lineWidth);
   font-size: 2.3em;
   font-weight: bolder;
   transform: translateY(-150%);
   border-bottom: 1px solid var(--lines);
}

.month-name-grid {
   position: absolute;
   height: fit-content;
   left: 5%;
   width: 100%;
   font-size: calc(3px + 0.4em); 
   transform: translateY(-100%);
   font-weight: bolder;
   cursor: pointer;
   z-index: 1;
   scale: var(--colScale);
   transform-origin: top left;
}

.month-name-grid:hover {
   transition: color 0.2s ease-in;
   color: var(--accent);
}

#month-name-title {
   position: relative;
   font-weight: bold !important;
   margin: 0 0 0 10px;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
}

/*Different month aimations*/
/*
@keyframes reset {
   0% {
      transform: translateX(var(--translateX)) translateY(var(--translateY)); 
   }
   100% {
      transform: translateX(0%) translateY(0%); 
   }
}
@keyframes container-animation {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(var(--translateX)) translateY(var(--translateY)); 
   }
}
*/
/*
.event-mark {
   width: 5px;
   height: 5px;
   background-color: teal;
   border-radius: 100px;
   position: absolute;
   left: 46%;
   top: 70%;
}
*/

.calendar-footer {
   position: relative;
   margin-top: 17px;
   height: fit-content; 
   text-align: center;
   overflow: hidden;
   border-radius: 0 0 20px 20px;
   transition: height 0.3s ease-in-out;
   display: flex;
   gap: 17px;
}

.quick-view-childe {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

.word-interval-container {
   position: absolute;
   top: 100%;
   width: 100%;
   height: 100%;
   background-color: rgb(34, 34, 34) !important; 
   transition: top 0.5s cubic-bezier(1, 0, 0, 1);
   padding: 0 5px 0 5px;
   border-radius: 20px;
   z-index: 2;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   display: none; /*OBS*/
}

.word-interval-container p {
   color: var(--textContent);
   font-size: 15px;
   padding-left: 5px;
   padding-right: 5px;
}

.word-interval-container div {
   margin-left: auto;
   margin-right: auto;
}

.addForm { 
   position: relative;
   width: calc(100% - 7px);
   height: fit-content;
   overflow: hidden;
   left: 50%;
   transform: translateX(-50%);
}

.addForm textarea {
   color: var(--textContent);
   height: auto;
}

.input-field div {
   color: var(--contrast);
} 

.addEventButtons {
   margin-top: 13px;
   text-align: right;
   padding: 0 0.75rem 0 0.75rem;
   display: flex;
   flex-direction: row;
   gap: 5px;
}

.addEventButtons a {
   color: black;
   font-weight: 300;
}

#addEventButton {
   background: var(--contrast);
}

#cancelAdd {
   background-color: hsl(0, 0%, 50%); /*?*/
}

.emptyForm {
   position: absolute; /*here*/
   left: 50%;
   transform: translateX(-50%);
   padding-top: 0px;
   padding-bottom: 20px;
   padding-left: 15%;
   padding-right: 15%;
   display: none;
}

.emptyForm h4 {
   color: var(--contrast);
   margin-top: -3px;
   white-space: nowrap;
}

.sidebar-wrapper {
   position: fixed;
   width: 30%;
   max-width: 450px;
   min-width: 200px;
   height: 100%;
   display: flex;
   flex-direction: row;
   /*display: none; Remove this*/
}

#sidebarContainerLeft {
   position: relative;
   height: calc(100% - 30px);
   width: 120px;
   background: var(--extracted-color); /*hsl(0, 54%, 30%)*/
   border-radius: 8px;
   margin: 15px;
}

#sidebarContainerRight {
   position: relative;
   height: calc(100% - 30px);
   width: 100%;
   margin-top: 15px;
   margin-bottom: 15px;
   border-radius: 10px;
   background: linear-gradient(to bottom, var(--extracted-color), var(--containers)); /*hsl(0, 54%, 40%)*/
}

.sidebar-body {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: fit-content;
}

#eventDayName {
   text-align: center;
   color: var(--containers);
   margin: 0;
}


/*
.sidebar-events.animate {
   animation: eventsSlide 1s;
}

@keyframes eventsSlide {
   0% {
      transform: translateY(0);
   }
   50% {
     transform: translateY(-105%);
   }
   100% {
      transform: translateY(0);
   }
}
*/

.search-bar {
   position: relative;
   color: var(--textContent);
   border: dashed 1px var(--textContent);
   border-radius: 6px;
   width: 95%;
   text-align: start;
   max-width: 210px;
}

.search-bar.placeholder {
   color: #ffffff49;
   text-align: center;
}

.addForm-row {
   position: relative;
   display: grid;
   padding-top: 10px;
   grid-template-columns: repeat(2, 1fr); /* Two columns in each row */
   place-items: center;
   gap: 20px 0;
   padding-bottom: 20px;
}

/*Event input field*/

.icon-container {
   position: relative;
   top: 0;
   width: 100%;
   height: max-content;
   display: flex;
   flex-direction: row;
   color: var(--textContent);
   justify-content: space-between;
   gap: 5px;
   padding: 10px;
   padding-top: 20px;
   overflow: scroll;
}

.icon-container div {
   position: relative;
   transition: opacity 0.2s ease-in-out;
   opacity: 0.4;
}

.icon-container div:hover {
   cursor: pointer;
   opacity: 1;
}

/*Calendar*/

.empty-message {
   position: relative;
   font-size: 1.2rem;
   padding: 15px 0 15px 0;
   color: var(--textContent);
   text-align: center;
}

.eventCard {
   color: var(--contrast);
}

.backgrund-circle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   aspect-ratio: 1 / 1;
   width: 80%;
   background-color: var(--red);
   border-radius: 100%;
   filter: blur(40px);
   opacity: 0.5;
}

#notificWrapperCalendar {
   position: relative;
   width: 100%;
   height: 500px;
}

.holiday-notific-container {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-height: 30px;
   height: max-content;
   overflow: hidden;
   border-radius: 6px;
   display: flex;
   flex-direction: row;
   gap: 2%;
}

.holiday-notific-container:hover {
   max-height: max-content;
}

.holiday-notific {
   position: relative;
   width: 100%;    
   height: 100%;
   background-color: var(--holidayColor);
   border-radius: inherit;
}

/* I dont know if this does anything
.holiday-notific > * {
   color: var(--containers);
}
*/

.notific-one {
   color: var(--textContent);
   border-radius: 12px;
   background-color: #1b1b1b;
}

.notific-two {
   position: relative;
   height: fit-content;
   width: fit-content;
   font-size: 1.1em;
   font-weight: bold;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.notific-three {
   position: relative;
   height: fit-content;
   width: fit-content;
   font-size: 1em;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.notific-one:hover > .eventCard-description {
   overflow: visible !important;
   text-overflow: clip !important;
   white-space: normal !important;
}

.notific-one:hover > .eventCard-header {
   overflow: visible !important;
   text-overflow: clip !important;
   white-space: normal !important;
}
/*STOP*/

.eventCard-header {
   position: relative;
   font-weight: bold;
   max-width: 205px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.eventCard-description {
   position: relative;
   color: var(--textContent);
   max-width: 205px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.5; 
   letter-spacing: 0.5px;
   margin-top: 5px;
}

.eventCard-time {
   position: absolute;
   color: var(--accent);
   letter-spacing: 1px;
   font-size: 11px;
   top: 0;
   right: 4%;
}

.eventCard-header:focus,
.eventCard-description:focus {
  outline: 1px dashed var(--borders); /*?*/
  border-radius: 4px;
}

/*Make this shorter*/

.eventCard-mark-wrapper {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: 60px;
   border-radius: 10px;
}

.eventCard-icon-wrapper {
   position: absolute;
   right: 4%;
   top: 50%;
   transform: translate(-50%, -50%);
   cursor: pointer;
   height: fit-content;
   width: fit-content;
}

.eventCard-icon-wrapper > .svg-icon {
   color: var(--extracted-color-light); 
} 

.quick-view .eventCard-icon-wrapper > .svg-icon {
   color: var(--red) !important; 
} 

.eventCard-icon-wrapper > .svg-icon:hover {
   color: var(--accent); 
}

.eventCard-mark > .svg-icon:hover {
   color: var(--textContent); 
}

.day-mark {
   position: absolute;
   bottom: 0;
   transform: translateY(50%);
   width: 0.5em;
   height: 0.5em;
   background-color: var(--holidayColor);
   border-radius: 50%;
   pointer-events: none;
}

.content-wrapper {
   padding-top: 50px;
   padding-bottom: 50px;
   margin-left: 300px;
   margin-right: 75px;
}

.days {
   position: relative;
   width: 100%;
   left: 0;
   display: flex;
   justify-content: space-between;
}

.col {
   position: relative;
   width: calc(100%-2em);
   aspect-ratio: 1/1;
   margin: 0.85em;
   font-size: 0.45em;
   scale: var(--colScale);
   font-weight: 100;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   border-radius: 50%;
   border: 0.05em solid transparent;
   transition: background-color 0.2s ease-in-out;
   box-shadow: none;
   cursor: pointer;
}

.col:hover {
   border: 0.05em solid var(--lines);
}

.empty-day {
   cursor: default !important; 
}

.empty-day:hover {
   border: none !important;
}

.selected-day-block-style {
   color: #000 !important;
}

.event-btn-container {
   position: relative;
   width: 100%;
   height: 148px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   gap: 17px;
   justify-content: center;
   align-items: center;
   transition: width 0.5s ease-in-out, gap 0.5s ease-in-out;
}

.quick-view {
   position: relative;
   width: 100%;
   height: 148px;
   border-radius: 20px;
   overflow: hidden;
   transition: height 0.5s ease-in-out;
   background-color: var(--containers);
}

.quick-view .eventCard { 
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   max-width: fit-content;
   max-height: fit-content;
   padding: 0 0 0 10px;
   font-size: 15px;
}

.quick-view .eventCard-icon-wrapper {
   position: relative;
   right: 0 !important;
   top: 0 !important;
   padding-right: 5px;
   transform: translate(0, 0) !important;
}

.quick-view .eventCard-icon-wrapper svg {
   height: 20px;
   width: 20px;
}

.quick-week-message {
   padding-top: 10px;
   position: relative;
   font-size: large;
   font-weight: bolder;
   color: var(--textContent);
}

.quick-week-message::before {
   content: '';
   position: absolute;
   height: 1px;
   width: 75%;
   background-color: rgba(255, 255, 255, 0.2);
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}

.quick-events {
   display: block;
}

.addEvent { 
   position: relative;
   width: 100%;
   padding: 8px 0 8px 0;
   cursor: pointer;
   border-radius: 25px;
   color: var(--textContent) !important;
   background-color: var(--containers);
   transition: all 0.5s;
   font-size: large;
   font-weight: bolder;
   z-index: 1;
   overflow: hidden;
   text-wrap: nowrap;
}

.mobile-header {
   right: 0;
   width: 75px;
   position: fixed;
   z-index: 101;
   height: 100%;
   backdrop-filter: blur(3px);
   background-color: var(--containers) !important;
}

.mobile-header a i {
   color: var(--contrast);
   font-size: 38px;
   margin-top: 13px;
   display: none;
}

.mobile-header h4 {
   margin: 0;
   font-weight: 300;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.fadeOutRight {
  animation-name: fadeOutRight;
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}
.fadeInRight {
  animation-name: fadeInRight;
}
.fadeInLeft {
  animation-name: fadeInLeft;
}

/*START*/
/*
.test-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 500px; 
  width: 500px;
  border: solid 1px #fff;
  overflow: hidden;
}

.solution {
   position: relative;
   width: 100%;
   height: 100%;
   transition: all var(--animationSpeed) ease-in-out;
}

.test-container {
   position: relative;
   height: 100%; 
   width: 100%;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   display: grid;
   grid-template-columns: repeat(6, 1fr); 
   grid-template-rows: repeat(6, 1fr); 
   transition: all var(--animationSpeed) ease-in-out;
}

.grid-item {
   position: relative;
   width: 100%;
   height: 100%;
   background-color: #3c3c3c;
   cursor: pointer;
   box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.08);
}
*/

#scroll-wrapper {
   position: relative;
   height: 700px;
   width: 40%;
   overflow: hidden;
   border: 1px solid black;
}

#scroll-container {
   position: relative;
   display: flex;
   flex-direction: column;
   height: fit-content;
   width: 100%;
   transform: translateY(0);
   transition: none;
}

.scroll-row {
   position: relative;
   display: flex;
   flex-direction: row;
   height: fit-content;
   width: 100%;
}

.scroll-item {
   border: 1px solid black;
   height: 150px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   background-color: #cccccc;
}